<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="confirm-modal">
      <view class="modal-title">{{ title || '提示' }}</view>
      <view class="modal-content">
        {{ content }}
      </view>
      <view class="modal-buttons" :class="{ 'single-button': showCancel === false }">
        <button v-if="showCancel" class="modal-btn cancel-btn" @click="handleCancel">{{ cancelText }}</button>
        <button class="modal-btn confirm-btn" :class="{ 'no-border': !showCancel }" @click="handleConfirm">{{ confirmText }}</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'ConfirmModal',
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    show() {
      this.$refs.popup.open();
    },
    hide() {
      this.$refs.popup.close();
    },
    handleCancel() {
      this.hide();
      this.$emit('cancel');
    },
    handleConfirm() {
      this.hide();
      this.$emit('confirm');
    }
  }
}
</script>

<style>
.confirm-modal {
  width: 580rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: hidden;
}

.modal-title {
  font-size: 32rpx;
  color: #333;
  text-align: center;
  padding: 30rpx 0 20rpx;
  font-weight: 500;
}

.modal-content {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  padding: 0 40rpx 40rpx;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  border-top: 1rpx solid #EEEEEE;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  background: #FFFFFF;
  margin: 0;
  padding: 0;
  border-radius: 0;
  position: relative;
}

.modal-btn::after {
  border: none;
}

.cancel-btn {
  color: #999999;
}

.confirm-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rpx;
  height: 50%;
  background-color: #EEEEEE;
}

.confirm-btn {
  color: #6E8CD5;
}

.modal-btn:active {
  background-color: #F5F5F5;
}

/* 适配不同设备的安全区域 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .confirm-modal {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* 适配小屏设备 */
@media screen and (max-width: 360px) {
  .confirm-modal {
    width: 520rpx;
  }
  
  .modal-title {
    font-size: 30rpx;
    padding: 24rpx 0 16rpx;
  }
  
  .modal-content {
    font-size: 26rpx;
    padding: 0 32rpx 32rpx;
  }
  
  .modal-btn {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 30rpx;
  }
}

.single-button {
  border-top: 1rpx solid #EEEEEE;
}

.no-border::before {
  display: none;
}
</style> 